<template>
    <div class="soilBox">
        <div class="title">
                <label><vxe-icon name="calendar" status="success" roll></vxe-icon>日期</label>
                <el-select v-model="selectYear" 
                @change="get_Soil_Nutrient"
                style="width:100px;margin-left:5px;" 
                placeholder="请选择">
                            <el-option
                            v-for="item in filterYearOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>

             <label><vxe-icon name="calendar" style="margin-left:50px;" status="success" roll></vxe-icon>温度设定</label>
                <el-select v-model="selectTemp" 
                @change="get_Soil_Nutrient"
                style="width:100px;margin-left:5px;"  placeholder="请选择">
                            <el-option
                            v-for="item in filterTempOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
            </div>
              <div class="yf-view" >
                <div class="box-card" @click="openModel(1)">
                        <div class="item">
                            <img src="@/assets/jy.png" /> 
                            <span class="name">积温</span>
                            <div class="centerMax">
                                <div class="value">{{ dataObject.accTemp }}℃</div>
                                <div>较去年+ 0℃ </div>
                                </div>
                        </div>
                        <vxe-icon class="btn-right" name="arrow-right" status="success" roll></vxe-icon>

                </div>
                <div class="box-card" @click="openModel(2)">
                        <div class="item"> 
                            <img src="@/assets/wd.png" /> 
                            <span class="name">积雨</span>
                            <div class="centerMax">
                                <div class="value">{{ dataObject.accPrecip }}mm</div>
                                <div>较去年+ 0mm </div>
                            </div>
                        </div>
                        <vxe-icon class="btn-right" name="arrow-right" status="success" roll></vxe-icon>
                </div>
            </div> 
            <vxe-modal v-model="openModelX" mask-closable
                    :title="openModelTitle==1?'积温明细':'积雨明细'" width="700" >
                    <template #default>
                    <vxe-table
                        show-overflow
                        auto-resize
                        height="500"
                        :scroll-y="{enabled: true}"
                        :data="openModelTitle==1?tempList:rainList">
                        <vxe-column :field="item.dataIndex" align="center" :title="item.title" v-for="item in getListData">
                            <template #default="{ row }" v-if="item.title=='较往年'">
                                <img v-if="row[item.dataIndex]" src="@/assets/shagnsheng.png" style="height:20px;" /> 
                                <img v-else src="@/assets/xiajiang.png" style="height:20px;" /> 
                            </template>
                        </vxe-column>
                    </vxe-table>
                    </template>
                </vxe-modal> 
    </div>
</template>

<script setup>
import {ref,onMounted, computed} from "vue"
import {getFarmlandAcc,getFarmlandAccList} from '@/api/plant'
import { ElMessageBox } from 'element-plus'
import {message} from '@/utils/element'
import {formatDate} from '@/utils/format.js'
const props = defineProps({
    detail:{
        type:Object,
        default:{}
    }
})
const emit = defineEmits(['set'])
const dataObject = ref({})
   
const tempList= ref([])
const rainList= ref([])
const selectTemp = ref(10)
const filterTempOptions = ref([])
const openModelX = ref(false)
const openModelTitle = ref(1)
const getTempFilters=()=> {
  const maxTemp = 30
  const minTemp = -11
  let tempList = []
  for (let i = maxTemp; i > minTemp; i--) {
    tempList.push({
      label: String(i) + '℃',
      value: i
    })
  }
  filterTempOptions.value = tempList
}

const selectYear = ref('2024')
const filterYearOptions = ref([])
const dataList = ref([])
const getYearFilters=()=> {
  const maxYear = 2024
  const minYear = 2019
  let yearList = []
  for (let i = maxYear; i > minYear; i--) {
    yearList.push({
      label: String(i) + '年',
      value: String(i)
    })
  }
  filterYearOptions.value = yearList
}
const getListData =computed(()=>{
    
  if(openModelTitle.value==2){
    return [
        {
            title: '日期',
            dataIndex: 'createTime',
        },
        {
            title: '积雨(mm)',
            dataIndex: 'rain',
        },
        {
            title: '较往年',
            dataIndex: 'lastYear',
            align: "center"
        },
        {
            title: '日平均降水(mm)',
            dataIndex: 'rainAv',
        },
        {
            title: '较往年',
            dataIndex: 'lastYearAv',
            align: "center"
        }
    ]
  }else{
    return [
        {
            title: '日期',
            dataIndex: 'createTime',
        },
        {
            title: '积温(°C)',
            dataIndex: 'temp',
        },
        {
            title: '较往年',
            dataIndex: 'lastYear',
            align: "center"
        },
        {
            title: '日平均温度(°C)',
            dataIndex: 'tempAv',
        },
        {
            title: '较往年',
            dataIndex: 'lastYearAv',
            align: "center"
        },
    ]
  }
  
})
onMounted(()=>{
    getTempFilters()
    getYearFilters()
    get_Soil_Nutrient()
})
const get_Soil_Nutrient = ()=>{
    getFarmlandAcc({
        farmLandId:props.detail.farmLandId,
        miniTemp:selectTemp.value,
        year:selectYear.value
    }).then(res =>{
        if(res.success){
            dataObject.value = res.data[0] ||{}
        }
    })

    getFarmlandAccList({
        farmLandId:props.detail.farmLandId,
        miniTemp:selectTemp.value,
        year:selectYear.value
    }).then(res =>{
        if(res.success){
            dataList.value = res.data ||{}
            const rains = res.data.map(item => {
                return {
                    createTime: formatDate(item.createTime),
                    rain: Number(item.accRainfall),
                    lastYear: Number(item.accRainfall) - Number(item.accRainfallLastyear) > 0,
                    rainAv: Number(item.precip),
                    lastYearAv: Number(item.precip) - Number(item.precipLastyear) > 0
                }
                }) 
                rainList.value = rains
                const temps = res.data.map(item => {
                return {
                    createTime:formatDate(item.createTime),
                    temp: Number(item.accTemp),
                    lastYear: Number(item.accTemp) - Number(item.accTempLastyear) > 0,
                    tempAv: Number(item.temp),
                    lastYearAv: Number(item.temp) - Number(item.tempLastyear) > 0,
                }
                })
                tempList.value = temps
            }
    })
    
}
const openModel =(type)=>{
    openModelX.value = true
    openModelTitle.value = type
}
</script>

<style lang="scss" scoped>
.title{
    display: flex;
    background: #00AF7016;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
    height: 40px;
    padding:0 10px;
    margin-bottom:10px;
}
.yf-view{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .box-card{
    width:46%;
    padding:12px;
    background: rgba(254, 249, 236, 0.85);
    border: 1px solid rgba(245, 200, 173, 0.42);
    position: relative;
    cursor: pointer;
    .item{
        display: flex;
        align-items: center;
        img{
            height:60px;
        }
        .name{
            font-size:20px;
            color: #333;
            font-weight: bold;
            margin-left:10px;
            border-right:1px solid #eee;
        }
        .centerMax{
            border-left: 1px solid #ddd;
            margin-left: 50px;
            padding-left: 50px;
            font-size:13px;
            color: #888;
           .value{
                font-weight: bold;
                font-size: 22px;
                color: #333;
           }
        }
    }
    .btn-right{
        position: absolute;
        right:20px;
        z-index:9;
        top:35px;
    }
  }
}
</style>